<template>
  <div class="detail" v-if="bol" id="toTop">
    <comNavBar></comNavBar>
    <div class="detailMian">
      <div class="contentTitle">
        {{ detailInfo.title }}
      </div>
      <van-sticky>
        <div class="authorBar" @click="toTop()">
          <div class="abLeft" @click="$router.push('/my')">
            <img
              v-if="detailInfo.aut_photo"
              :src="detailInfo.aut_photo"
              alt=""
              class="authorImg"
            />
            <img v-else src="../../assets/logo.png" alt="" class="authorImg" />
          </div>
          <div class="abRight">
            <div class="abR1">
              <div class="authorName">
                {{ detailInfo.aut_name }}
              </div>
              <div class="detailTime">
                {{ detailInfo.pubdate | difftime(detailInfo.pubdate) }}
              </div>
            </div>
            <div
              class="abR2"
              v-if="detailInfo.is_followed == false"
              @click="followClick(detailInfo.aut_id)"
            >
              <van-icon name="plus" class="plus" /><span class="follow"
                >关注</span
              >
            </div>
            <div class="abR2" v-else @click="UnFollowClick(detailInfo.aut_id)">
              <span class="follow">已关注</span>
            </div>
          </div>
        </div>
      </van-sticky>
      <!-- <div class="detailContent" v-html="detailInfo.content"></div> -->
      <van-cell class="detailBox">
        <template #title>
          <div class="mybox" v-html="detailInfo.content"></div>
        </template>
      </van-cell>
      <div
        class="guess"
        v-if="detailInfo && detailInfo.recomments.length > '0'"
      >
        <h3 class="guessTitle">猜你喜欢</h3>
        <div
          class="guessCon"
          v-for="(item, index) in detailInfo.recomments"
          :key="index"
        >
          <div class="gc1">{{ item.title }}</div>
        </div>
      </div>
      <div class="likeBar">
        <span
          class="star"
          @click="detailStarClick()"
          :class="{ islikeTrue: detailInfo.attitude == '1' }"
          ><van-icon name="good-job-o" class="starIcon" />点赞</span
        >
        <span
          class="dislike "
          @click="detailDislikeClick()"
          :class="{ islikeTrue: detailInfo.attitude == '0' }"
          ><van-icon name="delete" class="dislikeIcon" />不喜欢</span
        >
      </div>
    </div>
    <!-- <div class="advertising">
      <img src="../../assets/bgimg.png" class="adverImg" alt="" />
      <div class="adtext">
        <p>前端与移动开发-课程升级V6.0 高薪技术全覆盖</p>
        <p>学前端 选择-传智播客</p>
      </div>
    </div> -->
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="我真的一滴也没有了"
      @load="onLoad"
      id="com"
    >
      <!-- <comComment :commentList="commentList"></comComment>
      <commentPop @refreshComData="refreshComData()"></commentPop> -->
      <template v-if="commentList.length > 0">
        <div
          class="detailComment"
          v-for="(item, index) in commentList"
          :key="index"
        >
          <div class="comLeft" v-if="item.aut_photo">
            <img :src="item.aut_photo" alt="" />
          </div>
          <div class="comLeft" v-else>
            <img src="../../assets/logo.png" alt="" />
          </div>
          <div class="comRight">
            <div class="rTop">
              <span class="rT1">{{ item.aut_name }}</span>
              <span
                class="likeCount"
                @click="comlikeClick(item)"
                :class="{ liking: item.is_liking == true }"
                ><van-icon name="good-job-o" class="rT2" />{{
                  item.like_count
                }}</span
              >
            </div>
            <div class="rMid van-multi-ellipsis--l3" @click="textClick(item)">
              {{ item.content }}
            </div>
            <div class="rBot">
              <span class="botTime">{{
                item.pubdate | difftime(item.pubdate)
              }}</span>
              <span class="botNum" @click="rrComClick(item)"
                >{{ item.reply_count }} 回复数量</span
              >
            </div>
            <rrcomBox
              :item="item"
              ref="rrcomBox"
              v-if="item.reply_count > 0"
            ></rrcomBox>
          </div>
          <!-- 评论回复弹窗 -->
          <van-popup v-model="reComShow" position="bottom">
            <div class="commentBox">
              <div class="boxTop">
                <van-field
                  v-model="recommentMsg"
                  rows="4"
                  type="textarea"
                  :placeholder="`回复: ${itemObj.aut_name}:${itemObj.content}`"
                />
              </div>
              <div class="boxBot">
                快打起来~
                <van-button
                  type="info"
                  class="send"
                  @click="recommentClick(itemObj.com_id)"
                  >发送</van-button
                >
              </div>
            </div>
          </van-popup>
        </div>
      </template>
      <template v-else>
        <div class="detailComment">
          <div class="comNull">点击评论,拿到第一张沙发把~</div>
        </div>
      </template>
    </van-list>
    <div class="detailFooter" v-if="detailInfo">
      <div class="f1" @click="comShow = true">
        写评论
      </div>
      <!-- <commentPop :comShow="comShow"></commentPop> -->
      <van-popup
        v-model="comShow"
        position="bottom"
        :style="{ height: 'auto' }"
      >
        <div class="commentBox">
          <div class="boxTop">
            <van-field
              v-model="commentMsg"
              rows="4"
              type="textarea"
              placeholder="火钳刘哥明吧"
            />
          </div>
          <div class="boxBot">
            吹起来吧~
            <van-button type="info" class="send" @click="addCommentClick"
              >发送</van-button
            >
          </div>
        </div>
      </van-popup>
      <div class="footerRight">
        <div class="f2" @click="toTarget()">
          <van-icon
            name="chat-o"
            v-if="totalComments > 0"
            :badge="totalComments"
          />
          <van-icon name="chat-o" v-else />
        </div>
        <div
          class="f3 isCol"
          @click="UnCollectClick()"
          v-if="detailInfo.is_collected == true"
        >
          <van-icon name="star" />
        </div>
        <div class="f3 " v-else @click="collectClick()">
          <van-icon name="star-o" />
        </div>
        <div class="f4" @click="share = true">
          <van-icon name="share-o" />
        </div>
      </div>
    </div>
    <!-- 回复评论列表弹窗 -->
    <van-popup
      v-model="rrComShow"
      closeable
      close-icon-position="top-right"
      position="bottom"
      :style="{ height: '40%' }"
    >
      <van-list
        v-model="loading2"
        :finished="finished2"
        finished-text="我真的一滴也没有了"
        @load="onLoad2"
      >
        <div class="rrcomBox">
          <div class="rrcomTop">
            当前评论:
          </div>
          <div class="rrcomMian">
            <div
              class="detailComment"
              v-for="(item, index) in rrcomLists"
              :key="index"
            >
              <div class="comLeft" v-if="item.aut_photo">
                <img :src="item.aut_photo" alt="" />
              </div>
              <div class="comLeft" v-else>
                <img src="../../assets/logo.png" alt="" />
              </div>
              <div class="comRight">
                <div class="rTop">
                  <span class="rT1">{{ item.aut_name }}</span>
                  <span
                    class="likeCount"
                    @click="comlikeClick(item)"
                    :class="{ liking: item.is_liking == true }"
                    ><van-icon name="good-job-o" class="rT2" />{{
                      item.like_count
                    }}</span
                  >
                </div>
                <!-- wenben  -->
                <div class="rMid van-multi-ellipsis--l3">
                  {{ item.content }}
                </div>
                <div class="rBot">
                  <span class="botTime">{{
                    item.pubdate | difftime(item.pubdate)
                  }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </van-list>
    </van-popup>
    <!-- 分享弹窗 -->
    <!-- <sharePop :show="share"></sharePop> -->
    <van-popup
      v-model="share"
      closeable
      round
      close-icon="close"
      :style="{ height: '60%', width: '60%' }"
    >
      <img src="../../assets/qi.png" alt="" :style="{ width: '100%' }" />
    </van-popup>
  </div>
</template>

<script>
import {
  apiGetDetail,
  apiZan,
  apiDiszan,
  apiDislike,
  apiUnDislike,
  apiCollectDetail,
  apiUnCollectDetail,
  apiCommentLike,
  apiUnCommentLike
} from '../../api/article'
import { apiFollow, apiUnFollow } from '../../api/use'
import {
  apiGetComment,
  apiAddComment,
  apiAddCommentReply,
  apiGetCommentReply
} from '../../api/comment'

export default {
  name: 'detail',
  data () {
    return {
      // 文章信息
      detailInfo: '',
      // 上拉加载更多
      finished: false,
      loading: false,
      // // 是否关注
      // myFollow: ''
      detailId: this.$route.params.artid,
      // 评论偏移数
      lastNum: null,
      // 获取评论数量
      pageSize: 10,
      // 评论信息列表
      commentList: [],
      totalComments: 0,
      // 评论弹框控制
      comShow: false,
      // 评论信息
      commentMsg: '',
      // 静默刷新boolean
      bol: true,
      // 回复评论弹窗
      reComShow: false,
      // 回复评论内容
      recommentMsg: '',
      // 回复的对象
      itemObj: '',

      // 评论回复 数据
      rrComShow: false,
      loading2: false,
      finished2: false,
      offset: null,
      limit: 10,
      rrcomLists: [],
      rrcomId: '',
      rrtotalNum: '',

      // 保存点击回复评论列表的item
      momItem: '',

      // 分享弹窗默认样式
      share: false,

      // 双击事件计数器
      r1: 0,
      time: ''
    }
  },
  methods: {
    // 文章评论点击事件
    textClick (item) {
      this.reComShow = true
      this.itemObj = item
    },
    // 关注作者点击事件
    async followClick (id) {
      const res = await apiFollow(id)
      console.log('点击关注情况', res)
      this.detailInfo.is_followed = true
      this.$toast.success('关注成功')
      // this.myFollow == true
      // 刷新数据
    },
    // 取关作者点击事件
    async UnFollowClick (id) {
      this.detailInfo.is_followed = false
      this.$toast.fail('取消关注')
      const res1 = await apiUnFollow(id)
      console.log('取消点击关注情况', res1)
      // this.myFollow == true
      // 刷新数据
    },
    // 文章点赞&取消
    async detailStarClick () {
      if (this.detailInfo.attitude === -1 || this.detailInfo.attitude === 0) {
        const res2 = await apiZan(this.detailId)
        console.log('点赞文章', res2)
        this.$toast.success('点赞成功')
        this.detailInfo.attitude = 1
      } else if (this.detailInfo.attitude === 1) {
        this.detailInfo.attitude = -1
        this.$toast.fail('取消成功')
        const res3 = await apiDiszan(this.detailId)
        console.log('取赞文章', res3)
      }
    },
    // 文章不喜欢&取消
    async detailDislikeClick () {
      if (this.detailInfo.attitude === -1 || this.detailInfo.attitude === 1) {
        const res4 = await apiDislike(this.detailId)
        console.log('文章不喜欢', res4)
        this.detailInfo.attitude = 0
        this.$toast.success('很抱歉,会为您减少此类文章')
      } else if (this.detailInfo.attitude === 0) {
        this.detailInfo.attitude = -1
        this.$toast.fail('取消成功')
        const res5 = await apiUnDislike(this.detailId)
        console.log('取消文章不喜欢', res5)
      }
    },
    // 评论文章
    async addCommentClick () {
      this.$login()
      console.log('点击评论')
      const res7 = await apiAddComment({
        artid: this.detailId,
        content: this.commentMsg
      })
      console.log('添加评论情况', res7)
      this.$toast.success('评论成功')
      this.comShow = false
      this.commentMsg = ''
      this.refreshComData()
      this.toTarget()
      this.bol = false
      this.$nextTick(() => {
        this.bol = true
      })
    },
    // 上拉显示无更多事件
    async onLoad () {
      const res6 = await apiGetComment({
        artid: this.detailId,
        offset: this.lastNum,
        limit: this.pageSize
      })
      this.loading = false
      console.log('获取评论信息', res6)
      const resList = res6.data.data.results
      this.commentList.push(...resList)
      this.lastNum = res6.data.data.last_id
      this.totalComments = res6.data.data.total_count
      console.log('评论列表', this.commentList)
      if (this.totalComments <= this.commentList.length) {
        this.finished = true
      }
    },
    // 点击评论回复
    async recommentClick (id) {
      this.$login()
      console.log('回复评论', id)
      this.reComShow = false
      const res9 = await apiAddCommentReply({
        commid: id,
        content: this.recommentMsg,
        artid: this.detailId
      })
      console.log(res9)
      this.$toast.success('评论成功')
      this.recommentMsg = ''
      this.refreshComData()
      const child = this.$refs.rrcomBox.find(obj => obj.item.com_id === id)
      this.$refs.rrcomBox[this.$refs.rrcomBox.indexOf(child)].refresh()
    },
    // 点击展开回复列表id
    rrComClick (item) {
      // console.log('回复列表传值', id)
      if (item.reply_count > 0) {
        this.momItem = item
        this.rrcomId = item.com_id
        this.rrComShow = true
        this.offset = null
        this.finished2 = false
        this.rrcomLists = []
        this.rrtotalNum = ''
        this.loading2 = true
        this.onLoad2()
      }
    },
    // 上拉加载回复评论列表
    async onLoad2 () {
      const res10 = await apiGetCommentReply({
        commid: this.rrcomId.toString(),
        offset: this.offset,
        limit: this.limit
      })
      this.loading2 = false
      console.log('获取评论回复列表', res10)
      const resList2 = res10.data.data.results
      this.rrcomLists.push(...resList2)
      this.offset = res10.data.data.last_id
      this.rrtotalNum = res10.data.data.total_count
      console.log('回复列表', this.rrcomLists)
      if (this.rrtotalNum <= this.rrcomLists.length) {
        this.finished2 = true
      }
    },
    // 重置评论回复数据
    async reSetData () {
      const res10 = await apiGetCommentReply({
        commid: this.rrcomId.toString(),
        offset: this.offset,
        limit: this.limit
      })
      console.log('获取评论回复列表', res10)
      const resList2 = res10.data.data.results
      this.rrcomLists.push(...resList2)
      this.offset = res10.data.data.last_id
      this.rrtotalNum = res10.data.data.total_count
    },
    // 刷新评论数据
    async refreshComData () {
      this.lastNum = null
      const res6 = await apiGetComment({
        artid: this.detailId,
        offset: this.lastNum,
        limit: this.pageSize
      })
      this.commentList = res6.data.data.results
      this.lastNum = res6.data.data.last_id
      this.totalComments = res6.data.data.total_count
    },
    // 点击收藏文章
    async collectClick () {
      const res11 = await apiCollectDetail(this.detailId)
      console.log('收藏文章', res11)
      this.detailInfo.is_collected = true
      this.$toast.success('收藏成功')
    },
    // 点击取消收藏文章
    async UnCollectClick () {
      this.detailInfo.is_collected = false
      this.$toast.fail('取消成功')
      const res12 = await apiUnCollectDetail(this.detailId)
      console.log('取消文章收藏', res12)
    },
    // 点赞评论
    async comlikeClick (item) {
      if (item.is_liking === false) {
        const res13 = await apiCommentLike(item.com_id)
        if (this.rrComShow) {
          item.is_liking = true
          item.like_count++
        } else {
          this.refreshComData()
        }
        console.log('点赞评论', res13)
      } else {
        item.is_liking = false
        this.refreshComData()
        if (this.rrComShow) {
          item.is_liking = false
          item.like_count--
        }
        const res14 = await apiUnCommentLike(item.com_id)
        console.log('取消点赞评论', res14)
      }
    },
    // 点击评论跳转事件
    toTarget () {
      const posi = document.getElementById('com').offsetTop - 150
      window.scrollTo(0, posi)
    },
    // 点击回到顶部
    toTop () {
      this.r1++
      clearTimeout(this.time)
      console.log('计数器外', this.r1)
      this.time = setTimeout(() => {
        console.log('计数器内', this.r1)
        if (this.r1 === 2) {
          document.getElementById('toTop').scrollIntoView()
        }
        this.r1 = 0
        console.log('清0后')
      }, 300)
    }
  },
  components: {
    // 导入comNavBar组件
    comNavBar: () => import('../../components/comNavBar'),
    // // 导入评论组件
    // comComment: () => import('./commentCom'),
    // // 导入评论弹窗组件
    // commentPop: () => import('./commentPop'),
    // 导入品论预览组件
    rrcomBox: () => import('./rrcomBox')
  },
  async created () {
    const res = await apiGetDetail(this.detailId)
    console.log('页面进入请求详情', res)
    this.detailInfo = res.data.data
    this.myFollow = this.detailInfo.is_followed
    console.log('页面信息', this.detailInfo)
  }
}
</script>

<style lang="less" scoped>
.detail {
  padding-bottom: 50px;
  .detailMian {
    padding: 20px 15px 0;
    .contentTitle {
      font-size: 20px;
      font-family: Microsoft YaHei Bold, Microsoft YaHei Bold-Bold;
      font-weight: 700;
      text-align: left;
      color: #3a3a3a;
      line-height: 32.5px;
      letter-spacing: 2px;
      word-wrap: break-word;
    }
    /deep/ .van-sticky--fixed {
      padding: 5px 15px;
      background-color: #f5f5f5;
      .authorBar {
        margin: 0;
      }
    }
    .authorBar {
      width: 100%;
      display: flex;
      align-items: center;
      margin: 15px 0;
      .abLeft {
        width: 40px;
        .authorImg {
          width: 40px;
          height: 40px;
          border-radius: 50%;
          margin-right: 8px;
        }
      }
      .abRight {
        flex: 1;
        display: flex;
        justify-content: space-between;
        height: 40px;
        .abR1 {
          display: flex;
          flex-direction: column;
          justify-content: space-between;

          .authorName {
            font-size: 13px;
          }
          .detailTime {
            font-size: 12px;
            color: #b5b6b6;
          }
        }
        .abR2 {
          width: 85px;
          height: 29px;
          background: #3296fa;
          border-radius: 14.5px;
          color: white;
          text-align: center;
          line-height: 29px;
          font-size: 14px;
          margin-top: 5.5px;
          .plus {
            margin-right: 3px;
            vertical-align: middle;
            transform: translateY(-1px);
          }
          .follow {
            vertical-align: middle;
          }
        }
      }
    }
    .detailContent {
      font-size: 17px;
      line-height: 30px;
    }
    .guess {
      .guessTitle {
        font-size: 15px;
        font-family: Microsoft YaHei Bold, Microsoft YaHei Bold-Bold;
        font-weight: 700;
        text-align: left;
        color: #333333;
        line-height: 32.5px;
        letter-spacing: 2px;
      }
      .guessCon {
        .gc1 {
          width: 50%;
          font-size: 15px;
          font-family: Microsoft YaHei Regular, Microsoft YaHei Regular-Regular;
          font-weight: 400;
          text-align: left;
          color: #666666;
          line-height: 32.5px;
          letter-spacing: 2px;
        }
      }
    }
    .likeBar {
      text-align: center;
      font-size: 12.5px;
      font-family: Microsoft YaHei Regular, Microsoft YaHei Regular-Regular;
      font-weight: 400;
      text-align: center;
      line-height: 32.5px;
      letter-spacing: 1px;
      margin: 20px 0;
      .star {
        display: inline-block;
        width: 78px;
        height: 29px;
        color: #666666;
        border: 1px solid #eeeeee;
        line-height: 29px;
        border-radius: 29px;
        margin-right: 13.5px;
        .starIcon {
          vertical-align: text-bottom;
          transform: translateY(-2px);
        }
      }

      .dislike {
        width: 78px;
        height: 29px;
        display: inline-block;
        color: #666666;
        border: 1px solid #eeeeee;
        line-height: 29px;
        border-radius: 29px;
        .dislikeIcon {
          vertical-align: text-bottom;
          transform: translateY(-2px);
        }
      }
      .islikeTrue {
        color: #e32425 !important;
        border: 1px solid #e32425 !important;
      }
    }
  }
  // .advertising {
  //   padding: 10px 15px;
  //   .adverImg {
  //     height: 182.5px;
  //   }
  //   .adtext {
  //     margin-top: 5px;
  //     font-size: 12.5px;
  //     font-family: Microsoft YaHei Regular, Microsoft YaHei Regular-Regular;
  //     font-weight: 400;
  //     text-align: left;
  //     color: #222222;
  //     line-height: 18.5px;
  //     letter-spacing: 1px;
  //     p {
  //       margin: 0;
  //     }
  //   }
  // }
  .detailComment {
    // margin-top: 36.5px;
    display: flex;
    padding: 14px 15px 0;
    .comLeft {
      img {
        width: 35px;
        height: 35px;
        border-radius: 50%;
        margin-right: 10px;
      }
    }
    .comRight {
      flex: 1;
      .rTop {
        display: flex;
        justify-content: space-between;
        .rT1 {
          font-size: 13px;
          color: #3e659a;
        }
        .likeCount {
          font-size: 16px;
        }

        .rT2 {
          vertical-align: text-bottom;
          transform: translateY(-2px);
          margin-right: 2px;
        }
        /deep/ .liking {
          color: red;
        }
      }
      .rMid {
        font-size: 15px;
        line-height: 24px;
        margin-top: 15px;
        margin-bottom: 10px;
        word-break: break-word;
        background-color: #f4f5f6;
      }
      .rBot {
        font-size: 12px;
        line-height: 24px;
        .botTime {
          margin-right: 12.5px;
        }
        .botNum {
          padding: 6px 15px;
          background-color: #dadada;
          border-radius: 24px;
        }
      }
    }
    /deep/ .comNull {
      width: 100%;
      text-align: center;
      font-size: 12px;
      color: #ccc;
    }
  }
  .detailFooter {
    width: 100%;
    height: 44px;
    display: flex;
    align-items: center;
    padding: 0 15px;
    border-top: 1px solid #d9d9d9;
    background-color: #fff;
    position: fixed;
    bottom: 0;
    right: 0;
    .f1 {
      flex: 7;
      height: 32px;
      border: 1px solid #eeeeee;
      border-radius: 32px;
      line-height: 32px;
      text-indent: 16px;
      margin-right: 20px;
      margin-left: 30px;
      font-size: 15px;
      font-family: Microsoft YaHei Regular, Microsoft YaHei Regular-Regular;
      font-weight: 400;
      text-align: left;
      color: #a7a7a7;
      letter-spacing: 2px;
    }
    .footerRight {
      flex: 3;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 5px;
      .f2,
      .f3,
      .f4 {
        line-height: 32px;
        font-size: 20px;
        color: #777;
      }
      .isCol {
        color: gold;
      }
    }
  }
  .detailBox {
    padding: 0;
  }
  .mybox /deep/ img {
    width: 100%;
  }
  // 评论弹窗样式
  .commentBox {
    padding: 10px;
    .boxTop {
      border: 1px solid #ccc;
    }
    .boxBot {
      font-size: 16px;
      line-height: 28px;
      text-indent: 10px;
      margin-top: 5px;
      .send {
        width: 80px;
        height: 28px;
        float: right;
      }
    }
  }
  // 回复评论弹窗
  .rrcomBox {
    .rrcomTop {
      padding-top: 15px;
      padding-left: 15px;
      font-size: 18px;
    }
  }
  // 弹窗XX样式
  /deep/ .van-popup__close-icon--top-right {
    transform: translateY(-3px);
  }
}
</style>
